<template>
  <div class="field is-grouped container" :style="{marginTop: '10px'}">
      <p class="control is-expanded">
        <input
          class="input"
          type="text"
          placeholder="请输入新的待办事项"
          v-model.trim='inputValue'
          ref='Inputfocus'
          @keydown.enter='AddtolistItem'
        >
      </p>
      <p class="control">
        <a class="button is-primary" @click.prevent='AddtolistItem'>
          添加
        </a>
      </p>
    </div>
</template>

<script>
export default {
  name: 'TodolistInput',
  data() {
    return {
      inputValue:''
    }
  },
  methods: {
    AddtolistItem() {
      if(this.inputValue === '') {
        this.$refs.Inputfocus.focus()
        return
      }else {
        this.$emit('Inputvalue',this.inputValue)
        this.inputValue = ''
        this.$refs.Inputfocus.focus()
      }
    }
  }
}
</script>

<style>

</style>
